// 1. 找到图片
let image = $("#image");
// 2. 剪裁配置项
let option = {
  // 设置剪裁的比例
  aspectRatio: 1,
  // 指定预览区
  preview: ".img-preview",
};
// 3. 调用cropper方法，实现初始的效果
image.cropper(option);

// ---------------------- 点击上传 触发文件域的单击事件 ------------------
$('button:contains("上传")').on("click", function () {
  $("#file").trigger("click");
});

// ---------------------- 选择了图片，更换剪裁去的图片--------------------
$("#file").on("change", function () {
  console.log(2);
  // 获取图片的url的地址
  if (this.files.length > 0) {
    // 1. 找到文件对象
    let fileObj = this.files[0];
    // 2. 创建url
    let url = URL.createObjectURL(fileObj);
    // 更换剪裁去的图片
    // image.cropper('destroy').arrt('src',url).cropper(option);
    image.cropper("replace", url);
  }
});

// ------------------------ 完成更换 ---------------------------
// 点击 确定 按钮 --> 剪裁图片 -->转换成base64格式 --> 提交接口
$('button:contains("确定")').on("click", function () {
  // 剪裁图片
  let canvas = image.cropper("getCroppedCanvas", { width: 30, height: 30 });
  // canvas有一套内置的API方法 ，属于JS原生语法(只有指定jpeg格式，才能指定图片质量这个参数)
  let base64 = canvas.toDataURL("image/jpeg", 0.3);
  console.log(base64);
  axios
    .post("/my/user/avatar", `avatar=${encodeURIComponent(base64)}`)
    .then((res) => {
      let { status, message } = res.data;
      if (status === 0) {
        layer.msg(message);
        // 更新了头像，更新父页面(index.html)的头像
        window.parent.getUserInfo();
      }
    });
});
